<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE html>
<html>

<head>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/MUI/css/mui.picker.min.css">
<script src="${pageContext.request.contextPath}/resources/MUI/js/mui.picker.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css"media="all" />
<style>
.mui-input-row label {
	padding: 11px 10px 11px 15px;
}

select {
	color: white;
	background-color: #007aff;
	padding: 7px 15px;
	display: inline-block;
	width: 80px;
	height:33px;
	margin-top:0px;
}

/* 开关 */
.switch {
	display: block;
	width: 80px;
	height: 40px;
	background-color: #d4d4d4;
	border: 2px solid whitesmoke;
	border-radius: 5px;
	position: relative;
}

.switch input {
	display: none;
}

.switch label:before {
	content: "关";
	color: #c1c1c1;
	text-align: right;
	position: absolute;
	top: 0px;
	width: 66px;
	height: 34px;
	line-height: 36px;
	padding: 0 8px 0 0;
	display: block;
	margin: 1px;
	border-radius: 5px;
	background-color: white;
}

.switch label em {
	display: block;
	background-color: white;
	width: 34px;
	height: 36px;
	position: absolute;
	top: 1px;
	left: 1px;
	border: 1px solid #959595;
	border-radius: 4px;
}

.switch input:checked+label em {
	left: 41px;
}

.switch input:checked+label:before {
	color: white;
	content: "开";
	text-align: left;
	padding: 0 0 0 8px;
	background-color: #007aff;
}

.size {
	top: -40px;
	left: 40%;
}

.size input:checked+label:before {
	left: 0px;
	content: "能";
}

.size label:before {
	width: 51px;
	content: "否";
}

.caseBoxEditRecord{
	padding:0px 10px 10px 10px;
	color:#3e3e3e;
	font-size: 14px
}
.caseBoxEditRecord ul{
	box-shadow: 1px 2px 5px #bdbdbd;
	border-radius: 2%;
	padding:12px;
	background: white;
}
.caseBoxEditRecord ul li{
	display:flex;
   	display:-webkit-flex;/*Safari*/
   	justify-content:space-between;/*水平排布方式*/
   	align-items:center;/*垂直对齐方式*/
}
.caseBoxEditRecord > div{
	position:absolute;
	z-index:2;
	width:100%;
	height:100%
}
.caseBoxEditRecord li a div{
	display: inline-block;
	background: #007AFF;
	height:33px;
    line-height: 35px;
    color:white;
    font-size: 14px;
}
.caseBoxEditRecord li a div:first-child {
	border-radius:3px 0px 0px 3px;
    padding: 0px 3px;
}
.caseBoxEditRecord li a div:last-child {
	border-radius:0px 3px 3px 0px;
    line-height: 32px;
}
a{
    color: #007aff;
    font-size:17px;
 }
h4{
	display: inline-block;
	color:#616161;
	font-size:17px;
	font-weight: 600;
    line-height: 2;
}
.mui-switch.mui-active:before{
	content: "已启用";
}
.mui-switch:before {
	content: "已禁用";
}
.mui-switch.mui-active:before{
	left:5px;
}
.mui-switch:before{
	right: 5px;
}
.boxType{
	border-radius:0px;
    padding: 7px 3px;
   	width: 25px;
    color:#78ff78;
    font-size:14px;   
    margin-top: 15px;
}
}

</style>

<body>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-collapse"><a
			class="mui-navigate-right" href="#">表单</a>
			<form class="mui-input-group mui-collapse-content">
				<div class="mui-input-row mui-hidden">
					<label>caseNo:</label> <input type="text" class="caseNo"
						name="caseNo" placeholder="普通输入框">
				</div>
				<div class="mui-input-row">
					<label>位置:</label> <input type="text" class="place" name="place"
						placeholder="普通输入框">
				</div>
				<div class="mui-input-row">
					<label>编号:</label> <input type="text" class="caseNoBuy"
						name="caseNoBuy" placeholder="普通输入框">
				</div>
				<div class="mui-input-row">
					<label>备注:</label> <input type="text" class="des" name="des" placeholder="普通输入框">
				</div>
				<div class="mui-input-row">
					<label>公司:</label> <select name="compId">
						<c:forEach items="${myCompList}" var="list">
							<option value="${list.compId }">${list.compName}</option>
						</c:forEach>
					</select>
				</div>
				<div class="mui-input-row">
					<label>收费类型:</label> <select id="payTypecase" name="typeId">
						<c:forEach items="${caseTypeList}" var="list">
							<option value="${list.typeId }">${list.name}</option>
						</c:forEach>
					</select>
				</div>
				
				<!-- 设置储物柜使用时限权限 -->
				<shiro:hasPermission name="caseUseTime:setUseEndTime">
					<div class="mui-input-row">
						<label>使用时限:</label> 
						<input type="text" id="useEndTime" data-options='{}'  class="btn"  name="useEndTime" placeholder="请输入选择时间">
					</div>
				</shiro:hasPermission>
				
				<div class="mui-input-row">
					<label>用途:</label> <select name="useType">
						<option value="1" <c:if test="${useType==1}">selected</c:if>>普通储物柜</option>
						<option value="2" <c:if test="${useType==2}">selected</c:if>>医用床</option>
						<option value="3" <c:if test="${useType==3}">selected</c:if>>快递柜</option>
						<option value="7" <c:if test="${useType==7}">selected</c:if>>售卖机</option>
					</select>
				</div>
				<div class="mui-button-row">
					<a class="mui-btn mui-btn-primary submit">立即提交</a>
					<c:if test="${useType==7}">
						<a class="mui-btn mui-btn-primary" id="changePrice">调整价格</a>
					</c:if>
				</div>
				<div class="mui-input-row">
					<span style="line-height: 40px; margin-left: 15px;">修改尺寸:</span>
					<div class="switch size">
						<input type="checkbox" value="1" id="switchSize" /> <label
							for="switchSize" id="change"><em></em></label>
					</div>
				</div>
			</form></li>
	</ul>
	
	</br>
	<!-- <div id="leg_table"></div> -->
	<!--下拉刷新容器-->
    <div id="pullrefresh" >
    	
    </div>
	
	
	<script type="text/html" id="stateListBar">
			<a class="mui-btn mui-btn-primary open">开门</a>
			<a class="mui-btn mui-btn-primary clean">清除</a>
			<a class="mui-btn mui-btn-primary record">记录</a>
		</script>
	<script type="text/javascript">
        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
        
        	$(".mui-title").html("柜子详情");

			var page = 1;
			var pageData=[];
			var selectFlag = false;
        	var locker = sessionStorage.getItem('locker');
			locker = JSON.parse(locker);

			$(".caseNo").val(locker.caseNo)
	  		$(".useCase").val(locker.useCase)
	  		$(".des").val(locker.des)
	  		$(".place").val(locker.place)
	  		$(".caseNoBuy").val(locker.caseNoBuy)
	  		$("#useEndTime").val(locker.useEndTime)
	  		if(locker.isSize==1){
	  			let id = $("#change").attr("for");
				document.getElementById(id).checked = true;
	  		}
	  		//时间
			var btns = $('.btn');
			var useEndTime = "";
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							if(id == "useEndTime"){
								useEndTime = rs.text;
							}
							$("#"+id).val(rs.text);
							_self.picker.dispose();
							_self.picker = null;
						});
					
				}, false);
			});
	  		
        	//接收数据
        	var tempId =0;
			/* var stateList = $.legTable({
				limit: 10,			//默认10
				page:1,				//默认1
				id:"#leg_table",	//绑定id
				url:"/main/getCaseBoxList",
				where:{
					caseNo:locker.caseNo
				},
				cols:[
					{field: 'doorNum', title: '门号'},
		            {field: 'switchStatusStr', title: '开关状态'},
		            {field: 'useStatusStr', title: '占用'},
		            {field: 'saveId', title: '存物ID'},
		            {field: 'size', title: '柜子尺寸',templet:function (f){
		            	temp = f.size;
				    	var a="",b="",c="",d="";
		            	if(temp==0 ){
		            		a="selected"
		            	}else if(temp==1){
		            		b="selected"
			            }else if(temp==2){
			            	c="selected"
			            }else if(temp==3){
			            	d="selected"
			            }
		            	
		            	return '<select id="'+f.boxId+'">  '
			            	+'<option value="0" '+a+'>请选择</option> '
			            	+'<option value="1" '+b+'>大</option> '
			            	+'<option value="2" '+c+'>中</option> '
			            	+'<option value="3" '+d+'>小</option>  </select>';
		            }},
		            {field: 'goodsPrice', title: '价格'},
		            {field: 'saveTimeStr', title: '存物时间'},
		            {field: 'isConn', title: '是否正常',templet:function(f){
		            	if(f.isConn == "异常"){
		            		return "<span style='color:red;'>异常</span>";
		            	}else{
		            		return "<span>正常</span>";
		            	}
		            }},
		            {field: 'isLocked', title: '是否锁门',templet:function(f){
		            	if(f.isLocked == "否"){
		            		return "<span style='color:red;'>否</span>";
		            	}else{
		            		return "<span>是</span>";
		            	}
		            }},
		            {field: 'isShow', title: '启用', templet:function(f){
		            	var temp = "";
		            	if(f.isShow==1){
		            		temp = 'checked="checked"'
		            	}
		            	return '<div class="switch">'
		            		+'<input  type="checkbox" value="1" id="switch'+f.boxId+'"'+temp+'/>'
		                	+'<label for="switch'+f.boxId+'" id="'+f.boxId+'"><em></em></label>'
		                +'</div>';
		            }},
		            {title: '操作', templet:'#stateListBar'}
		        ]
			}); */
			
            //size
           /* 	$("#offCanvasContentScroll .mui-scroll").on("change",".table-list ul li select",function(){
           		boxId= this.id
           		var size = $(this).find('option:selected').val();
       			$.get("/main/changeSize?boxId="+boxId+"&size="+size+"&caseNo="+locker.caseNo,function(res){
       				mui.toast(res.message);
       			})
           	}) */
           
           	 //size
           	$("#offCanvasContentScroll .mui-scroll").on("change",".caseBoxEditRecord select",function(e){
           		let id = $("#change").attr("for")
    			if (!document.getElementById(id).checked) {
					mui.toast("权限不足");
					setTimeout(function(){location.reload()},200);
					return;
				}
           		boxId= this.id
           		var size = $(this).find('option:selected').val();
       			$.get("/main/changeSize?boxId="+boxId+"&size="+size+"&caseNo="+locker.caseNo,function(res){
       				mui.toast(res.message);
       				if(!res.success){
       					setTimeout(function(){location.reload()},200);
       				}
       			})
           	})
			
           	//记录
			/* $("#leg_table").on("touchstart", ".table-list .record", function(e){
			 	let i = $(this).parent('data').attr("value");
				let url = "/stateRecord/index";
				sessionStorage.setItem("url",url)
				window.location.hash = url;
				sessionStorage.setItem("door",JSON.stringify($.data(i)))
		    }) */
		    //记录
		    $("#pullrefresh").on("touchstart", ".caseBoxEditRecord .record", function(e){
		    	var index = e.currentTarget.parentElement.parentElement.parentElement.id;
            	var data = pageData[index];
				let url = "/stateRecord/index";
				sessionStorage.setItem("url",url)
				window.location.hash = url;
				sessionStorage.setItem("door",JSON.stringify(data))
		    })
           	
		    //调整价格
		    $("#changePrice").on("touchstart",function(){
		    	let url = "/goods/priceChange?caseNo="+ locker.caseNo;
				sessionStorage.setItem("url",url)
				window.location.hash = url;
		    })
		    
           //开门
           /* $("#leg_table").on("touchstart", ".table-list .open", function(e){
        	    let i = $(this).parent('data').attr("value");
				mui.confirm('是否开门？','温馨提示',function(e) {
					if (e.index == 1) {
		           	 	$.get("/main/openBoxByAdmin?caseNo=" + $.data(i).caseNo+"&boxNum="+$.data(i).doorNum,function(res){
			           		if (!res.success) {
			           			mui.toast(res.message);
			       			}else{
			       				mui.toast("开启成功");
			       			}
			           	})
					}
				})
				
            }) */
            //开门
            $("#pullrefresh").on("touchstart", ".caseBoxEditRecord .open", function(e){
            	var index = e.currentTarget.parentElement.parentElement.parentElement.id;
            	var data = pageData[index];
				mui.confirm('是否开门？','温馨提示',function(e) {
					if (e.index == 1) {
		           	 	$.get("/main/openBoxByAdmin?caseNo=" + data.caseNo+"&boxNum="+data.doorNum,function(res){
			           		if (!res.success) {
			           			mui.toast(res.message);
			       			}else{
			       				mui.toast("开启成功");
			       			}
			           	})
					}
				})
				
            })
            
            //清除
            /* $("#leg_table").on("touchstart", ".table-list .clean", function(e){
            	let i = $(this).parent('data').attr("value");
				mui.confirm('是否清除？','温馨提示',function(e) {
					if (e.index == 1) {
		       	    	$.get("/main/boxClear?boxId=" + $.data(i).boxId,function(res){
		       	    		if (!res.success) {
		       	    			mui.toast(res.message);
		       				}else{
		       					mui.toast("清除成功，请妥善保管储物柜的物品，以免产生纠纷！！！",{duration: 'long'});
		       				}
		       	    	});
					}
				})
       	     }) */
       	     
			//清除
            $("#pullrefresh").on("touchstart", ".caseBoxEditRecord .clean", function(e){
            	var index = e.currentTarget.parentElement.parentElement.parentElement.id;
            	var data = pageData[index];
				mui.confirm('是否清除？','温馨提示',function(e) {
					if (e.index == 1) {
		       	    	$.get("/main/boxClear?boxId=" + data.boxId,function(res){
		       	    		if (!res.success) {
		       	    			mui.toast(res.message);
		       				}else{
		       					mui.toast("清除成功，请妥善保管储物柜的物品，以免产生纠纷！！！",{duration: 'long'});
		       				}
		       	    	});
					}
				})
       	     })
       	     //开启/关闭
            /* $("#leg_table").on("touchstart", ".switch label",function(e){
            	boxId= this.id
            	let status = 1;
            	let id = $(this).attr("for")
            	
    			if (document.getElementById(id).checked) {
    				status = 0;
    			}
            	mui.confirm('是否清除？','温馨提示',function(e) {
					if (e.index == 1) {
		    			$.get("/main/boxOpenOrClose?boxId=" + boxId + "&status=" + status, function(res) {
		    				if (!res.success) {
		    					mui.toast(res.message);
		    					location.reload();
		    				} else{
		    					mui.toast("操作成功");
		    				}
		    			}, "json"); 
					}
					//location.reload();
				})
            }) */
             //开启/关闭
			mui(document).on('tap',".mui-switch",function(e){
				var nowNode = e.srcElement;
				let status = 1;
				var statusStr="启用";
				if(nowNode.className=='mui-switch-handle'){
					nowNode = e.srcElement.parentNode;
				}
				if(nowNode.className == 'mui-switch'){
					nowNode.className = 'mui-switch mui-active'
				}else{
					nowNode.className = 'mui-switch';
					status = 0;
					statusStr="禁用";
				}
				
				
				mui.confirm('是否'+statusStr+'？','温馨提示',function(e) {
					if (e.index == 1) {
		    			$.get("/main/boxOpenOrClose?boxId=" + nowNode.id + "&status=" + status, function(res) {
		    				if (!res.success) {
		    					mui.toast(res.message);
		    					location.reload();
		    				} else{
		    					mui.toast("操作成功");
		    				}
		    			}, "json"); 
					}else{
						nowNode = switchFun(nowNode);
					}
				}) 
				
			})
			
			function switchFun(nowNode){
				nowNode.className=='mui-switch'?nowNode.className = 'mui-switch mui-active':nowNode.className='mui-switch';
				return nowNode;
			}
			
            
            //能否修改size
            $("#change").on("touchstart",function(e){
            	console.log(e)
            	let status = 1;
            	let id = $(this).attr("for")
            	
			            	
    			if (document.getElementById(id).checked) {
    				status = 0;
    			}
            	console.log(status)
            	$.post("/main/changeCaseSize", {
					caseNo: locker.caseNo,
					size: status
				},
				function(res) {
					if(!res.success) {
						// 提示失败
						mui.toast(res.message);
						location.reload();
					} else {
						mui.toast("操作成功");
					}
				});
            })	
           	
    	 //提交
		$(".submit").on("touchstart",function(){
			$.post("/main/BoxChange",$("form").serialize(),function(rest){
				 if(rest.success){
					 mui.toast("编辑成功");
					 stateList(1);
				 }else{
					 mui.toast(res.message);
				 }
			 })
		})
		
		//空字符串校验
	    function isNotNull(obj){
		    var result = true;
	    	if(obj instanceof Function){
	    		 return result;
	    	}
		    switch (obj) {
		        case undefined:
		        case null:
		            result = false;
		            break;
		    }
		    if(result){
			    if(obj.replace(/\s+/g,"") == ""){//空字符串校验
			            result = false;
		    	}
		    }
		    return result;
		}
        
			
		var config = {
			data:[],
			cols:[{field: 'doorNum', title: '',templet:function(f){
					return f.doorNum+"号门"
				}},
				{field: 'isShow', title: '', templet:function(f){
	            	var temp = "";
	            	if(f.isShow == 1){
	            		temp = ' mui-active'
	            	}
	            	return '<div id='+f.boxId+' class="mui-switch'+temp+'"><div class="mui-switch-handle"></div></div>';
	            }},
	            {field: 'useStatusStr', title: '',templet:function(f){
	            	if(f.useStatusStr=="空闲"){
	            		return '<font style="color:green">未使用</font>'
	            	}
	            	return '<font style="color:#007aff">已占用</font>'
	            }},
	            {field: 'saveId', title: '存物ID:'},
	            {field: 'saveTimeStr', title: '存物时间:'},
	            {field: 'isLocked', title: '',templet:function(f){
	            	if(f.isConn == "异常"){
	            		return "<span style='color:red;'>线路异常</span>";
	            	}else if(f.isLocked == "否"){
	            		return "<span style='color:red;'>未关门</span>";
	            	}else{
	            		return "<span style='color:green'>已关门</span>";
	            	}
	            }},
	            {title: '', templet:function(f){
	            	var dom  = 	'<a class="mui-btn mui-btn-primary open">开门</a>'+
				    			'<a class="mui-btn mui-btn-primary clean">清除</a>'+
				    			'<a class="mui-btn mui-btn-primary record">记录</a><a><div class="chooseBoxSize">尺寸</div><select id="'+f.boxId+'" class="boxType">';
			    	var boxTyeArr=["&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请选择&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;","大","中","小"];
			    	$.each(boxTyeArr,function(i,item){
			    		var selected='';
			    		if(i == f.size){
			    			selected = 'selected';
			    		}
			    		dom = dom +'<option value="'+i+'" '+selected+'>'+item+'</option>'
			    	});
			    	dom = dom +'</select><div><i class="layui-icon layui-icon-triangle-d" style="color:white;border-left:#bdbdbd solid 1px"></div></i></a>';
		            return dom;
	            }}],
    		runner:function(flag){
    			var data = this.data;
    			var cols = this.cols;
    			if(flag){
					$("#pullrefresh").empty();
    			}
	    		$.each(data,function(i,item1){
	    			var dom = '<div class="caseBoxEditRecord" id='+((page-1)*10+i)+'><ul class="mui-table-view">'+
	    				'<li><h4>doorNum</h4><font style="float:right">isShow</font></li>'+
	    				'<li><font style="width:55%;display:inline-block;">useStatusStr</font><font>isLocked</font></li>'+
	    	   			'<li><font>saveId</font></li>'+
	    				'<li><font>saveTimeStr</font></li>'+
	    			    '<li>operation</li></ul></div>';
					var elChild;
					for (var j = 0; j < cols.length; j++) {
						var item2 = cols[j];
						var value;
						if(isNotNull(item2.templet)){
							if(item2.templet instanceof Function){
								value = item2.templet(item1);
							}else{
								value = $("#"+item2.templet.replace("#",""))[0].innerHTML;
							}
						}else{
							value = item1[item2.field];
						}
						value = item2.title+value;
						if(j == (cols.length-1)){
							dom = dom.replace("operation",value);
						}else{
							dom = dom.replace(item2.field,value);
						}
					};
	    			$("#pullrefresh").append(dom);
	    			pageData.push(item1);
				});
    	}};
		
		var listenScreenFlag = true;
		var maxScrollYFlag = true;
		var lastScrollVla;
		var scroll = mui('.mui-inner-wrap .mui-scroll-wrapper').scroll(); 
	    document.querySelector('.mui-inner-wrap .mui-scroll-wrapper' ).addEventListener('scroll', function (e){
	    	 if(scroll.y<-50 && listenScreenFlag){
	    		$(".upTop").show();
	    		listenScreenFlag = false;
	    		
	    	}else if(scroll.y >= -50 && !listenScreenFlag){
	    		$(".upTop").hide();
	    		listenScreenFlag = true;
	    	}
	    	
	    	
	    	if(scroll.y < scroll.maxScrollY && $(".loading").length==0){
	    		$("#pullrefresh").append('<div class="loading">&nbsp;</div>');
	    	}
	    	if((scroll.y+30) < scroll.maxScrollY && maxScrollYFlag){
	    		maxScrollYFlag = false;
	    		$(".loading").text('正在加载...');
	    		setTimeout(function(){
	    			page++;
	    			getInfo();
	    		},1000)
    		}
    	})
	    
		function getInfo(){
	    	var url = '/main/getCaseBoxList?page='+page+'&caseNo='+locker.caseNo;
         	$.ajax({ 
	    		url:url, 
	    		type:'get',
	    		dataType:"json",
	    		timeout:10000,
	    		data:{},
	    		success:function(res){
	    			//console.log(res)
	    			$(".loading").remove();
	    			if(res.data.length==0){
	    				$("#pullrefresh").append('<div class="loading">————我是有底线的————</div>');
	    			}else{
		    			maxScrollYFlag=true;
	    			}
	    			config.data=res.data;
					config.runner(selectFlag);
					selectFlag = false;
	               },
	               error:function(data){
	     	    		console.log("error")
 	    	}});
        }
        getInfo();
   
		</script>
</body>

</html>